<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="海城户外" @click-right="onClickRight">
      <template #left>
        <div style="font-size: 10px; color: blue" v-if="$store.state.islogin">
          欢迎您：{{ $store.state.username }}
        </div>
        <div style="font-size: 10px; color: blue" v-else>
          当前未登录，请登录
        </div>
      </template>
      <template #right>
        <van-button
          type="danger"
          size="small"
          text="登录"
          to="/login"
        ></van-button>
      </template>
    </van-nav-bar>
    <!-- <van-nav-bar
      title="海城户外"
      @click-right="onClickRight"
      left-text="欢迎您，xxx"
      v-if="$store.state.islogin"
    >
      <template #right>
        <van-button
          type="danger"
          size="small"
          text="登录"
          to="/login"
        ></van-button>
      </template>
    </van-nav-bar> -->

    <!-- logo部分 -->
    <div class="logo">
      <img src="img/logo.png" alt="" />
    </div>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      show-action
      shape="round"
      background="#CC0D15"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <van-button square type="default" @click="onSearch(value)" size="small"
          >搜索</van-button
        >
      </template>
    </van-search>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" :style="{ height: h }">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="`${image.img}`" width="375px" height="145px" @click="ic(index)"/>
      </van-swipe-item>
    </van-swipe>
    <!-- 功能导向 -->
    <van-grid :border="false" :column-num="4" icon-size="60" :gutter="0">
      <van-grid-item text="全部分类" icon="/img/fenlei.png"> </van-grid-item>
      <van-grid-item text="全部品牌" icon="/img/brand.png"> </van-grid-item>
      <van-grid-item text="低价清仓" icon="/img/qingcang.png"> </van-grid-item>
      <van-grid-item text="实体店" icon="/img/shitidian.png"> </van-grid-item>
      <van-grid-item text="我的订单" icon="/img/dingdan.png"> </van-grid-item>
      <van-grid-item text="购物车" icon="/img/shopcarts.png" to="/shopcart"> </van-grid-item>
      <van-grid-item text="优惠" icon="/img/ypouzhi.png"> </van-grid-item>
      <van-grid-item text="帮助中心" icon="/img/help.png"> </van-grid-item>
    </van-grid>
    <!-- 人气单品 商品类别可循环出来-->
    <div class="picScroll">
      <div class="hd">
        <h2>人气单品</h2>
        <span>
          <a href="#" @click="goList">更多>></a>
        </span>
      </div>
      <div class="bd">
        <ul>
          <li v-for="(v, i) of single" :key="i">
            <router-link :to="`/detail/${v.lid}`"
              ><img :src="`${v.pic}`" alt="" @click="detail"
            /></router-link>
            <p>{{ v.title }}</p>
            <p class="jg">
              ￥{{ v.price }}&nbsp;
              <s>{{ v.market_price }}</s>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 户外服饰 -->
    <div class="picScroll">
      <div class="hd">
        <h2>户外服饰</h2>
        <span>
          <a href="#" @click="goList">更多>></a>
        </span>
      </div>
      <div class="bd">
        <ul>
          <li v-for="(v, i) of fushi" :key="i">
            <router-link :to="`/detail/${v.lid}`"
              ><img :src="`${v.pic}`" alt="" @click="detail"
            /></router-link>
            <p>{{ v.title }}</p>
            <p class="jg">
              ￥{{ v.price }}&nbsp;
              <s>{{ v.market_price }}</s>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 户外鞋靴 -->
    <div class="picScroll">
      <div class="hd">
        <h2>户外鞋靴</h2>
        <span>
          <a href="#" @click="goList">更多>></a>
        </span>
      </div>
      <div class="bd">
        <ul>
          <li v-for="(v, i) of shoes" :key="i">
            <router-link :to="`/detail/${v.lid}`"
              ><img :src="`${v.pic}`" alt="" @click="detail"
            /></router-link>
            <p>{{ v.title }}</p>
            <p class="jg">
              ￥{{ v.price }}&nbsp;
              <s>{{ v.market_price }}</s>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 包 -->
    <div class="picScroll">
      <div class="hd">
        <h2>人气背包</h2>
        <span>
          <a href="#" @click="goList">更多>></a>
        </span>
      </div>
      <div class="bd">
        <ul>
          <li v-for="(v, i) of bags" :key="i">
            <router-link :to="`/detail/${v.lid}`"
              ><img :src="`${v.pic}`" alt="" @click="detail"
            /></router-link>
            <p>{{ v.title }}</p>
            <p class="jg">
              ￥{{ v.price }}&nbsp;
              <s>{{ v.market_price }}</s>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 登山用品 -->
    <div class="picScroll">
      <div class="hd">
        <h2>登山必备</h2>
        <span>
          <a href="#" @click="goList">更多>></a>
        </span>
      </div>
      <div class="bd">
        <ul>
          <li v-for="(v, i) of dengshan" :key="i">
            <router-link :to="`/detail/${v.lid}`"
              ><img :src="`${v.pic}`" alt="" @click="detail"
            /></router-link>
            <p>{{ v.title }}</p>
            <p class="jg">
              ￥{{ v.price }}&nbsp;
              <s>{{ v.market_price }}</s>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 页尾 -->
    <div class="copyright">
      © 2021 北京海城行知户外运动用品有限公司&nbsp;&nbsp;&nbsp;
    </div>
    <!-- 底部选项卡 -->
    <van-tabbar v-model="active" fixed>
      <van-tabbar-item icon="wap-home-o">主页</van-tabbar-item>
      <van-tabbar-item
        icon="shopping-cart-o"
        to="/shopcart"
        :badge="`${this.sname}`"
      >
        购物车
      </van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/me">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<style >
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
a {
  text-decoration: none;
  color: #333;
}
s {
  color: gray;
}
li {
  text-decoration: none;
}
.logo {
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
}
.van-button::before {
  border-radius: 5px;
}
/* 轮播图 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
/* 人气单品 商品小模板*/
.picScroll {
  clear: both;
  background: #fff;
  width: 100%;
  margin: 5px 0;
  text-align: center;
  position: relative;
}
.picScroll .hd {
  height: 30px;
  line-height: 30px;
  border-left: 5px #cc0000 solid;
  border-bottom: 1px #cc0000 solid;
  overflow: hidden;
  text-align: left;
  padding: 0 10px;
  position: relative;
}
.picScroll .hd h2 {
  position: absolute;
  top: 0;
  left: 10px;
  font-size: 14px;
  font-weight: 500;
}
.bd {
  width: 100%;
}
.picScroll .bd ul {
  display: table-cell;
  vertical-align: top;
  display: flex;
  flex-wrap: wrap;
}
.picScroll .bd li {
  width: 50%;
  float: left;
  font-size: 12px;
  text-align: center;
  position: relative;
}
.picScroll .bd ul li img {
  width: 150px;
  height: 150px;
}
.picScroll .bd li p {
  padding: 0 5px;
  height: 30px;
  line-height: 15px;
}
.picScroll .bd li p.jg {
  height: 25px;
  line-height: 25px;
  font-family: Arial;
  font-size: 12.5pt;
  text-align: center;
  color: rgb(255, 102, 0);
}
.picScroll .hd span {
  position: absolute;
  top: 0;
  right: 10px;
  display: block;
  width: 60px;
  text-align: right;
}
.copyright {
  width: 100%;
  height: 6vh;
  line-height: 6vh;
  border-top: 1px #ccc solid;
  text-align: center;
  font-size: 12px;
}
</style>
<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      h: "145px",
      // 搜索框
      value: "",
      //底部导航
      active: 0,
      //轮播图
      images: [],
      //人气单品
      single: [],
      //分类
      fenlei: [],
      //其它类别 (服饰，鞋，包，登山品)
      others: [],
      fushi: [],
      shoes: [],
      bags: [],
      dengshan: [],
    };
  },
  methods: {
    // 封装一个方法 动态计算当前屏幕宽度下，轮播图的高度
    initSwipeHeight() {
      let picw = 1000; // 图片宽
      let pich = 350; // 图片高
      let screenw = window.screen.width; // 屏幕宽
      let swipeh = (pich * screenw) / picw + "px";
      this.h = swipeh;
    },
    // 导航框
    onClickRight() {
      this.$toast("登录框");
    },
    //搜索框
    onSearch(val) {
      Toast(`搜索${val}相关的商品`);
      this.$router.push(`/lists/${val}`);
    },
    onCancel() {
      this.$toast("取消");
    },
    //点击类别1的内容跳转的方法
    detail(event) {
      console.log(event.target);
    },
    //点击其它所有类别的内容跳转的方法
    details() {},
    //点击轮播图跳转
    ic(index){
      let links = this.images[index].href.split("/").slice(-2);
      console.log("/"+links.join("/"));
      this.$router.push("/"+links.join("/"));
    },
    //跳转主页
    goList(){
      this.$router.push(`/list`);
    }
  },
  mounted() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    this.initSwipeHeight();
    console.log(this.sname);
    //发送请求获取轮播图信息
    this.axios.get("/carousel").then((res) => {
      console.log(res.data);
      this.images = res.data;
      console.log(this.images);
    });
    //获得商品类别信息构建大框架
    this.axios.get("/fenlei").then((res) => {
      console.log(res.data);
      // console.log(res.data.splice(1));
      this.fenlei = res.data.splice(1);
      console.log(this.fenlei);
    });
    //发送请求获得首页相关种类1的商品信息
    this.axios.get("/item/1").then((res) => {
      console.log(res.data);
      this.single = res.data;
    });
    //发送请求获得首页全部信息（除了类别1以外的）
    this.axios.get("/items").then((res) => {
      console.log(res.data);
      this.others = res.data;
      // [this.fushi, this.shoes, this.bag, this.dengshan] = [this.others.splice(0,4),this.others.splice(4,4),this.others.splice(8,4),this.others.splice(12,4)];
      // console.log(this.dengshan)
      this.fushi = this.others.splice(0, 4);
      this.shoes = this.others.splice(0, 4);
      this.bags = this.others.splice(0, 4);
      this.dengshan = this.others.splice(0, 4);
      // console.log(this.bags);
    });
  },
  computed: {
    ...mapState(["sname"])
  },
};
</script>